<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.div1{
			width:100px;
			height:100px;
			background-color: skyblue;
			position:absolute;
			left:120px;
			top:8px; 
			z-index:999;
			border-radius: 50px;
		}
		.div2,.div3{
			width:50px;
			height:50px;
			background-color: pink;
			opacity: 0;
			position:absolute;
			left:120px;
			top:8px; 
			transition:ease 5s;
			border-radius:25px;
		}
		.div1:hover+.div2{
			opacity: 1;
			transform: translateX(120px) translateY(80px);
		}
		.div1:hover~.div3{
			opacity: 1;
			transform: translateX(-73px) translateY(80px);
		}
	</style>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</body>
</html>

